<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<!--实现输入框实时同步-->
<div id="app">
    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            firstname: '',
            lastname: '',
        },
        methods: {
        },
        computed: {
            // 计算属性，是一个属性，当作一个属性使用，不要作为函数调用
            // 注意：使用方式与data中的属性使用方式相同
            // 注意：当计算属性中引用的数据发生变化时，计算属性会重新计算
            // 注意：当计算属性引用的值没有变化时，计算属性得到的值会被缓存，其他地方使用到不会再次计算
            fullname: function () {
                return this.firstname + this.lastname
            }
        }
    })

    // computed watch methods的区别
    // methods 用于处理一些具体的业务逻辑和点击事件
    // computed 是一种计算属性，一般是对一些数据的二次处理，返回处理好的结果，函数必须有返回值
    // watch 监听data中属性的值变化或者路由地址变化，用于处理业务逻辑或者简单的数据二次处理，有methods和computed特点
</script>
</body>
</html>
